<template>
  <a-form-model-item :label="label" :prop="prop">
    <a-date-picker
      class="readonly"
      v-if="readonly"
      v-model="value"
      :placeholder="placeholder"
      :format="format"
      disabled
      style="width: 100%; background-color: #fff; color: rgba(0, 0, 0, 0.65); cursor: auto"
    />
    <!-- 年月日 -->
    <template v-if="!readonly && dateType === 'date'">
      <a-date-picker
        v-model="value"
        :show-time="showTime"
        :placeholder="placeholder"
        :format="format"
        :disabled="disabled"
        :isDisabledDate="isDisabledDate"
        :disabledDate="disabledDate"
        style="width: 100%"
        @change="handleChange"
      />
    </template>
    <!-- 年月 -->
    <template v-if="!readonly && dateType === 'month'">
      <a-month-picker
        v-model="value"
        :placeholder="placeholder"
        :format="format"
        :disabled="disabled"
        style="width: 100%"
        @change="handleChange"
      />
    </template>
    <!-- 年 -->
    <template v-if="!readonly && dateType === 'year'">
      <a-date-picker
        v-model="value"
        :placeholder="placeholder"
        :format="format"
        mode="year"
        :disabled="disabled"
        style="width: 100%"
        :open="isOpen"
        @openChange="openChange"
        @panelChange="panelChange"
        @change="handleChange"
      />
    </template>
  </a-form-model-item>
</template>

<script>
import moment from 'moment';
export default {
  name: 'DatePicker',
  props: {
    //是否禁用今天之前日期
    isDisabledDate: {
      type: Boolean,
      default: false,
    },
    // 日期类型
    dateType: {
      type: String,
      default: 'date',
    },
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute',
    },
    // 文字
    label: {
      type: String,
      default: '',
    },
    // 是否选择时间
    showTime: {
      type: Boolean,
      default: false,
    },
    // 日期格式
    format: {
      type: String,
      default: 'YYYY-MM-DD',
    },
    valueFormat: {
      type: String,
      default: 'timestamp',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false,
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    parentData: function () {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    },
  },
  watch: {
    parentData: {
      handler: function (val) {
        if (!val) {
          this.value = '';
        } else if (this.valueFormat === 'YYYYMMDD') {
          this.value = this.transcodingYYYYMMDD(val, true);
        } else {
          this.value = moment(val);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      value: undefined,
      isOpen: false,
    };
  },
  methods: {
    disabledDate(current) {
      if (this.isDisabledDate) {
        return current && current < moment().subtract(1, 'days'); //当天之前的不可选，不包括当天
      }
    },

    handleChange(e) {
      var timestamp;
      if (this.valueFormat === 'YYYYMMDD') {
        timestamp = this.transcodingYYYYMMDD(e);
      } else if (this.valueFormat === 'YYYYMM') {
        timestamp = moment(e).format('YYYY-MM');
      } else if (this.valueFormat === 'YYYY') {
        timestamp = moment(e).format('YYYY');
      } else {
        timestamp = moment(e).valueOf();
      }
      this.$emit('change', timestamp);
      this.analysisAttribute(this.form, timestamp);
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0 || val === '') {
        if (length !== 1) {
          index++;
        }
        object[arr[index]] = val;
      } else {
        return object;
      }
    },
    /**
     * [transcodingYYYYMMDD 解码YYYYMMDD格式]
     * @param  {[type]}  val    [数据]
     * @param  {Boolean} isRead [是否读取]
     * @return {[type]}         [description]
     */
    transcodingYYYYMMDD(val, isRead) {
      var result;
      if (!val) {
        result = '';
      } else if (isRead) {
        result = val.split('');
        result.splice(6, 0, '-');
        result.splice(4, 0, '-');
        result = result.join('');
        result = moment(result, 'YYYY-MM-DD');
      } else {
        result = moment(val).format('YYYY-MM-DD');
        result = result.split('-').join('');
      }
      return result;
    },
    openChange(status) {
      if (status) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
    },
    panelChange(value) {
      let timestamp = moment(value).format('YYYY');
      this.$emit('change', timestamp);
      this.analysisAttribute(this.form, timestamp);
      this.isOpen = false;
    },
  },
};
</script>
<style>
.readonly .ant-input[disabled] {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.65);
  cursor: auto;
}
</style>
